<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>hahahahahaha</div>
    <div class="box1">蒹葭苍苍，白露为霜</div>
    <p>qianduanke</p>
    <p>菜就别玩</p>
    <div id="box">
        <p class="box1">又菜又爱玩</p>
    </div>
</body>
<script>
    //let const
    //选择器：标签选择器，id选择器，类选择器
    //querSelector（）获取第一个元素
    const eln1=document.querySelector('p'); //通过标签选择
    console.log(eln1);
    const eln2=document.querySelector('#box');  //通过id名选择
    console.log(eln2);
    eln1.style.color='blue';
    const eln3=document.querySelector('.box1'); //通过类名选择
    console.log(eln3);
    //获取所有元素
    const eln01=document.querySelectorAll('div');
    console.log(eln01);
    //像遍历数组一样遍历eln01.
    //通过遍历伪数组eln01能获取指定位置的元素
    for(let i=0;i<eln01.length;i++){
        console.log(eln01[i]);
    }
    eln01[1].style.color='green';
</script>
</html>